import React, {Component} from 'react';
import {
    TouchableOpacity,
    View,
    ActivityIndicator
} from "react-native";


export default class Button extends Component {
    onPress = event => {
        if(this.props.disabled)return;
        if(this.timer)clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            this.props.onPress && this.props.onPress(event)
        },300)
    }

    render() {
        let props = this.props;
        return (
            <TouchableOpacity
                {...this.props}
                activeOpacity={props.opacity || 0.7}
                style={[
                    {
                        height: 40,
                        borderRadius: 4
                    },
                    this.props.style,
                    {
                        opacity: 0.90,
                        position:'relative',
                        overflow:'hidden',
                        flexDirection:'row',
                        justifyContent:'center',
                        alignItems: 'center'
                    },
                ]}
                onPress={this.onPress}
            >
                {
                    (props.loading && !props.disabled) &&
                    <ActivityIndicator style={{
                        width: 30,
                        height: '100%',
                    }} size="small" color={props.loadingColor || 'rgb(48,90,255)'} />
                }
                {props.children}
                {
                    props.disabled && //按钮禁用
                    <View style={{
                        position:'absolute',
                        width: '100%',
                        height:'100%',
                        backgroundColor:'rgba(100,100,100,0.6)'
                    }}/>
                }

            </TouchableOpacity>
        );
    }
}

